<template>
  <div class="member-collect">
    <!-- 顶部标题 -->
    <div class="xtx-center-head">
      <h4 class="title fl">收藏的商品</h4>
    </div>
    <!-- 收藏商品 -->
    <div class="xtx-collect-goods">
      <div v-if="loading" class="loading"></div>
      <div v-if="!loading && collectGoodsList.length === 0">
        <CollectNone/>
      </div>
      <ul>
        <li v-for="goodsItem in collectGoodsList" :key="goodsItem.id">
          <CollectGoodsItem :goods="goodsItem" @on-cancel="handlerCancel(goodsItem)"/>
        </li>
      </ul>
      <xtx-pagination
        v-if="total > 0"
        :current-page="reqParams.page"
        :page-size="reqParams.pageSize"
        @current-change="reqParams.page=$event"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { collectType } from '@/api/constant'
import { findCollect, cancelCollect } from '@/api/collect'
import CollectNone from './components/collect-none.vue'
import CollectGoodsItem from './components/collect-goods-item.vue'
import Message from '@/components/library/message'
import Confirm from '@/components/library/confirm'
export default {
  name: 'MemberCollectGoods',
  components: {
    CollectGoodsItem,
    CollectNone
  },
  setup () {
    // 查询参数
    const reqParams = reactive({
      page: 1,
      pageSize: 12,
      collectType: 1
    })
    // 获取收藏商品列表数据
    const collectGoodsList = ref([])
    const loading = ref(false)
    // 分页需要的数据总条数
    const total = ref(0)
    const getCollectGoods = () => {
      loading.value = true
      findCollect(reqParams).then(data => {
        collectGoodsList.value = data.result.items
        total.value = data.result.counts
        loading.value = false
      })
    }
    // 切换分页条件发生变化就重新加载数据
    watch(reqParams, () => {
      // 重新加载数据前清除原始数据
      collectGoodsList.value = null
      getCollectGoods()
    }, { immediate: true })
    // 取消收藏
    const handlerCancel = (goodsItem) => {
      Confirm({ text: '亲，您确认取消该条收藏吗' }).then(() => {
        cancelCollect(goodsItem.id, 1).then(() => {
          Message({ type: 'success', text: '取消成功' })
          getCollectGoods()
        })
      }).catch(e => {})
    }
    return { reqParams, total, collectType, collectGoodsList, loading, handlerCancel }
  }
}
</script>

<style scoped lang='less'>
.member-collect {
  height: 100%;
  background: #fff;
}
.xtx-center-head {
  line-height: 70px;
  margin: 0 25px;
  height: 70px;
  border-bottom: 1px solid #f5f5f5;
  .title {
    font-size: 16px;
    font-weight: 400;
  }
}
.xtx-collect-goods {
  position: relative;
  min-height: 400px;
  padding: 20px 25px;
  .loading {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 222px;
      height: 336px;
      text-align: center;
      padding: 2px 0 20px 0;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:hover {
        transition: all .5s;
        transform: translate3d(0,-3px,0);
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
      }
    }
  }
}
</style>
